<%@page import="facebook.Utilities"%>
<% if (session.getAttribute("userid") != null) {%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #summation {
                font-size: 18px;
                font-weight: bold;
            }

            .txt {
                font-weight: bold;
                text-align: right;
            }


        </style>


        <%@ include file="/style/styles.html" %>
        <%@ include file="/js/libraries.html" %>   
        <title>Ricarica credito</title>
        <script src="jquery-somma.js"></script>
        <!-- Crea problemi con header <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>-->

    </head>
    <body onload="init();initRicarica();">
        <div id="wrapper">
            <%@ include file="/header.jsp" %>
            <div id="body">
                <div id="second_half">
                    <img src="/delo-war/images/first.jpg" alt="party" height="300" width="400" style="margin-top:30px;">
                </div> 
                <div id="first_half"> 
                    <br /><br />
                    <img src="/delo-war/images/ricarica.png" alt="Ricarica_credito" height="34" width="273" style="margin-bottom:15px;">
                    <p class="big_one">Ciao, il costo per impression è di solo un centesimo di Euro. </p>
                    <form name="input" action="payment.jsp" method="post">
                        <table border="0">
                            <tr id="event_time_row" >
                                <td width="49%"><p class="big_one">Quante impression vorresti acquistare?</p></td>
                                <td>           
                                    <input class="txt" type="text" name="impressions_number" value="" required autofocus>
                                </td>


                            <tr id="summation">
                                <td>&nbsp;</td>
                                <td align="right">Euro: </td>
                                <td align="center"><span id="sum">0</span></td>
                            </tr>

                        </table>
                        <input type="submit" value="Ricarica">
                    </form>


                </div><p class="clear"></p>

                <br /><br />
                <div id="separatore"></div>
                <p class="clear"></p>
                <table border="0" cellpadding="30" cellspacing="20" width="100%">
                    <tbody>
                        <tr>
                            <td width="49%">
                                <table width="92%">
                                    <tr>
                                    <tr>               <p class="big_one"> <b>Tramite questa pagina: </b></p>

                                    <td class="feature-image"><img alt="credito" src="/delo-war/images/credito.jpg" height="140" width="140"></td>
                                    <td >

                                        <p class="big_one">Hai la possibilità di caricare il tuo credito <b>Delo</b> e convertirlo in impressions per i tuoi eventi!</p>
                                        <p class="big_one">Il costo per ogni impression è di solo un centesimo di euro.</p>
                                    </td>
                        </tr>
                        </tr>
                </table>
                </td>
                <td width="49%">
                    <table width="95%">
                        <tr>
                        <tr>              <p class="big_one">    <b>Perché conviene sponsorizzare i propri eventi? </b></p>
                        <td class="feature-image"><img alt="insert" src="/delo-war/images/maialino.jpg" height="150" width="170"></td>
                        <td>
                            <p class="big_one">Promuovendo i tuoi eventi,  hai la possibilità di far comparire nelle ricerche degli altri utenti il tuo evento
                                            prima di ogni altro.</p>
                               <p class="big_one"> Gli eventi visualizzati per primi sono in genere quelli più visitati!
                            </p>
                        </td>
                        </tr>

                        </tr>
                    </table>
                </td>
                </tr>
                </tbody>
                </table>




                <br /><br /> <br /> 
            </div>


            <div id="footer">
                unito.it - DIPARTIMENTO DI INFORMATICA (Facolt&agrave; di Scienze M.F.N.) - C.so Svizzera 185, Torino
            </div>

        </div>
        <script>
            $(document).ready(function(){
        
                //iterate through each textboxes and add keyup
                //handler to trigger sum event
                $(".txt").each(function() {
            
                    $(this).keyup(function(){
                        calculateSum();
                    });
                });
        
            });
    
            function calculateSum() {
        
                var sum = 0;
                //iterate through each textboxes and add the values
                $(".txt").each(function() {
            
                    //add only if the value is number
                    if(!isNaN(this.value) && this.value.length!=0) {
                        sum += parseFloat(this.value);
                        sum = sum*0.01;
                    }
            
                });
                //.toFixed() method will roundoff the final sum to 2 decimal places
                $("#sum").html(sum.toFixed(2));
            }
        </script>
    </body>
</html>

<% } else
        response.sendRedirect(Utilities.getBaseUrl(request));
%>








